<template>
  <basic-modal
    v-bind="$attrs"
    show-confirm
    :confirm-loading="confirmLoading"
    width="750px"
    @confirm="hanleSubmit"
    @close="handleClose"
    @cancel="handleCancel"
  >
    <n-form ref="formRef" :model="modelForm" :rules="rules">
      <n-grid :cols="24" :x-gap="10" :y-gap="10">
        <n-gi :span="12">
          <n-form-item label="姓名" path="name">
            <n-input
              placeholder="请输入客户名称"
              v-model:value="modelForm.name"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="12">
          <n-form-item label="性别" path="gender">
            <n-select
              placeholder="请选择客户性别"
              v-model:value="modelForm.gender"
            ></n-select>
          </n-form-item>
        </n-gi>
        <n-gi :span="12">
          <n-form-item label="联系电话" path="phoneNumber">
            <n-input
              placeholder="请输入客户联系电话"
              v-model:value="modelForm.phoneNumber"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="12">
          <n-form-item label="邮箱" path="email">
            <n-input
              placeholder="请输入客户邮箱"
              v-model:value="modelForm.email"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="12">
          <n-form-item label="证件类型" path="personalType">
            <n-select
              placeholder="请选择证件类型"
              v-model:value="modelForm.personalType"
            ></n-select>
          </n-form-item>
        </n-gi>
        <n-gi :span="12">
          <n-form-item label="证件号" path="personalId">
            <n-input
              placeholder="请输入客户证件号"
              v-model:value="modelForm.personalId"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="12">
          <n-form-item label="所在省" path="state">
            <n-input
              placeholder="请输入客户所在省"
              v-model:value="modelForm.state"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="12">
          <n-form-item label="所在市" path="city">
            <n-input
              placeholder="请输入客户所在市"
              v-model:value="modelForm.city"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="12">
          <n-form-item label="所在区" path="district">
            <n-input
              placeholder="请输入客户所在区"
              v-model:value="modelForm.district"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="12">
          <n-form-item label="邮编" path="zipCode">
            <n-input
              placeholder="请输入客户邮编"
              v-model:value="modelForm.zipCode"
            />
          </n-form-item>
        </n-gi>
        <n-gi :span="24">
          <n-form-item label="详细地址" path="address">
            <n-input
              placeholder="请输入客户详细地址"
              v-model:value="modelForm.address"
            />
          </n-form-item>
        </n-gi>
        <!-- <n-gi :span="24">
          <n-form-item label="附加属性">
            <n-space>
              <n-checkbox
                :checked-value="'1'"
                :unchecked-value="'0'"
                v-model:value="modelForm.isMerchant"
              >
                商家客户
              </n-checkbox>
              <n-checkbox
                :checked-value="'1'"
                :unchecked-value="'0'"
                v-model:value="modelForm.isDefault"
              >
                默认客户
              </n-checkbox>
            </n-space>
          </n-form-item>
        </n-gi> -->
      </n-grid>
    </n-form>
  </basic-modal>
</template>
<script setup lang="ts">
import { FormInst, useMessage } from "naive-ui";
import { defineProps, useAttrs, withDefaults, ref, reactive, watch } from "vue";
import { ActionTypeEnum } from "@/enums/actionTypeEnum";
import { CustomerDto } from "@/types/model/customer/dtos/customer.dto";
import { addCustomer } from "@/api/customer/customer.api";
import { ICustomerModalProps } from "./props";

const rules = {
  name: [
    {
      required: true,
      message: "请输入客户名称",
      trigger: "change",
    },
  ],
  phoneNumber: [
    {
      required: true,
      message: "请输入客户联系电话",
      trigger: "change",
    },
  ],
};

const $attrs = useAttrs();
const message = useMessage();

const emit = defineEmits(["update:show", "close", "cancel", "createSuccess"]);

const props = withDefaults(defineProps<ICustomerModalProps>(), {
  actionType: ActionTypeEnum.ADD,
  customerDetail: () => ({} as CustomerDto),
});

watch(
  () => $attrs.show,
  (newVal, oldVal) => {
    if (oldVal && !newVal) {
      // true 变 false 时，重置表单
      refreshForm();
      formRef.value?.restoreValidation();
    }
  }
);

const confirmLoading = ref<boolean>(false);
const formRef = ref<FormInst | null>(null);

const modelForm = reactive<CustomerDto>({
  id: "",
  name: "",
  gender: "",
  phoneNumber: "",
  email: "",
  personalType: "",
  personalId: "",
  state: "",
  city: "",
  address: "",
  zipCode: "",
  isDefault: "",
  isMerchant: "",
});

const refreshForm = () => {
  modelForm.id = "";
  modelForm.name = "";
  modelForm.gender = "";
  modelForm.phoneNumber = "";
  modelForm.email = "";
  modelForm.personalType = "";
  modelForm.personalId = "";
  modelForm.state = "";
  modelForm.city = "";
  modelForm.address = "";
  modelForm.zipCode = "";
  modelForm.isDefault = "";
  modelForm.isMerchant = "";
};

const handleAddCustomer = async () => {
  try {
    confirmLoading.value = true;
    const res = await addCustomer(modelForm);
    message.success("添加成功");
    console.log(res);
    emit("createSuccess", res.result as CustomerDto);
  } finally {
    confirmLoading.value = false;
  }
};

const hanleSubmit = async () => {
  formRef.value?.validate(async (errors) => {
    if (errors) {
      message.error("请正确输入表单项");
      return;
    }

    if (props.actionType === ActionTypeEnum.ADD) {
      handleAddCustomer();
    }
  });
};

const handleClose = () => {
  emit("update:show", false);
  emit("close");
};

const handleCancel = () => {
  emit("update:show", false);
  emit("cancel");
};
</script>
